<template>
  <el-row>
    <el-col class="el-col" :span="12" :offset="6">
      <Header @add="add"></Header>
      <hr />
      <list :todoList="todoList" :del="del" :changeFlag="changeFlag"></list>
      <hr />
      <Footer :all="todoList.length" :selectNum="selectNum"></Footer>
    </el-col>
  </el-row>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, watch } from "vue";
import Footer from "./components/Footer.vue";
import Header from "./components/Header.vue";
import List from "./components/List.vue";

import { todo } from "./types/todo";
export default defineComponent({
  components: { Header, List, Footer },
  setup() {
    const todoList = reactive<todo[]>([
      {
        id: 0,
        title: "吃",
        flag: false,
      },
      {
        id: 1,
        title: "玩",
        flag: false,
      },
      {
        id: 2,
        title: "打游戏",
        flag: false,
      },
    ]);

    // 添加
    const add = (title: string) => {
      todoList.push({
        id: todoList.length,
        title,
        flag: false,
      });
    };

    // 删除
    const del = (index: number) => {
      todoList.splice(index, 1);
    };

    // 选中或不选中
    const changeFlag = (todo: todo, value: boolean) => {
      todo.flag = value;
      console.log(todoList);
    };

    const selectNum = ref<number>(0);
    watch(
      todoList,
      (value) => {
        console.log(value);
        selectNum.value = value.reduce((pre, item) => {
          return item.flag == true ? pre + 1 : pre;
        }, 0);
      },
      {
        deep: true,
        immediate: true,
      }
    );
    return {
      todoList,
      add,
      del,
      changeFlag,
      selectNum,
    };
  },
});
</script>

<style scoped>
.el-col {
  margin-top: 50px;
  border: 1px solid red;
}
</style>